<template>
  <bsCard v-loading="loading" class="valveModel-wrapper" :width="getBsLRWPercent(520)" :height="`${cardHeight}px`">
    <div class="bs-card-title">企业价值模型</div>
    <app-echarts :height="`${cardHeight - cardTitleHeight - 20}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getEnterpriseValueScale } from '@/api/bigscreen'
export default {
  name: 'valveModel',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      echartsOption: {
        tooltip: {
          trigger: 'item',
          formatter(params){
            return `潜力: ${params.data[1]}\t\n安全: ${params.data[2]}`
          }
        },
        grid: {
          left: '0',
          right: '10%',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            name: '安全',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel: {
              // rotate: 15
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '潜力',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            nameTextStyle: {
              color: '#fff'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            // symbolSize: function(data) {
            //   let sizeVal = +data[2]
            //   let size = 5
            //   if (sizeVal < 100 && sizeVal > 0) {
            //     size += 5
            //   } else if (sizeVal < 1000 && sizeVal > 100) {
            //     size += 10
            //   } else if (sizeVal < 5000 && sizeVal > 1000) {
            //     size += 20
            //   } else if (sizeVal < 10000 && sizeVal > 5000) {
            //     size += 25
            //   } else if (sizeVal > 10000) {
            //     size += 30
            //   }
            //   return size
            // },
            symbolSize: 20,
            data: [],
            itemStyle: {
              normal: {
                // shadowBlur: 10,
                // shadowColor: 'rgba(120, 36, 50, 0.5)',
                // shadowOffsetY: 5,
                color: function(e) {
                  let sizeVal = +e.data[2]
                  let color = '#EED285'
                  if (sizeVal < 100 && sizeVal > 0) {
                    color = '#98DB8E'
                  } else if (sizeVal < 1000 && sizeVal > 100) {
                    color = '#F89275'
                  } else if (sizeVal < 5000 && sizeVal > 1000) {
                    color = '#FFC107'
                  } else if (sizeVal < 10000 && sizeVal > 5000) {
                    color = '#706EE7'
                  } else if (sizeVal > 10000) {
                    color += '#98DB8E'
                  }
                  return color
                }
              }
            },
            type: 'scatter'
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getEnterpriseValueScale()
        if (res.resultCode === 200) {
          //
          this.renderData(res.resultData || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderData(data) {
      const pointData = data.map((per) => {
        return [per.security, per.potential, per.size, per.name]
      })
      this.echartsOption.series[0].data = pointData
    }
  }
}
</script>

<style lang='scss'>
.valveModel-wrapper {
}
</style>

